<!-- 离职问题库-新增、编辑问题 -->
<template>
  <a-modal
    width="45%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    draggable
    title-align="center"
    :unmount-on-close="true"
  >
    <template #title> {{ props.list ? '编辑问题' : '新增问题' }} </template>
    <div style="display: flex; justify-content: center">
      <a-form
        ref="refForm"
        :rules="rules"
        :model="formData"
        :style="{ width: '60%' }"
        :auto-label-width="true"
      >
        <a-form-item field="scopeApply" label="适用范围：" required>
          <a-select v-model="formData.scopeApply" placeholder="请选择">
            <a-option :value="1">离职申请审批中</a-option>
            <a-option :value="2">离职申请审核后</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="question" label="离职问题：">
          <a-input v-model="formData.question" placeholder="请输入"></a-input>
        </a-form-item>

        <a-form-item label="问题描述：">
          <a-textarea
            v-model="formData.remark"
            show-word-limit
            :max-length="300"
            :auto-size="{
              minRows: 5
            }"
            allow-clear
            placeholder="请输入"
          ></a-textarea>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
import { RepeatLeaveProblemList } from '@/apis/management/human/baseSetting/leaveSetting';
import clonedeep from 'lodash.clonedeep';
import { Message } from '@arco-design/web-vue';
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    list: any; // 传进来的数据
  }>(),
  {
    visible: false,
    list: undefined
  }
);
const refForm = ref();
const emits = defineEmits(['update:visible', 'AddProblemEmit']);

let formData: any = ref({
  question: '', // 离职问题
  scopeApply: undefined, // 适用范围 1审核中 2审核后
  remark: '' // 问题描述
});

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      // 如果有数据则赋值，没有则初始化
      if (props.list) {
        formData.value = clonedeep(props.list);
      }
    } else {
      for (let i in formData.value) {
        formData.value[i] = '';
      }
    }
  }
);

const handleOk = async () => {
  const res = await refForm.value.validate();
  if (res) return;
  emits('AddProblemEmit', clonedeep(formData.value));
  emits('update:visible', false);
  formData.value.question = '';
  formData.value.scopeApply = undefined;
  formData.value.remark = '';
};

const handleCancel = () => {
  formData.value.question = '';
  formData.value.scopeApply = undefined;
  formData.value.remark = '';
  emits('update:visible', false);
};
const rules = {
  question: [
    {
      required: true,
      message: '请填写离职问题'
    },
    {
      validator: async (value: string, cb: any) => {
        try {
          if (props.list.id && value === props.list.question) {
            //
          } else {
            const res = await RepeatLeaveProblemList({
              question: value,
              scopeApply: formData.value.scopeApply
            });
            if (res.code) cb(`${res.msg}`);
          }
        } catch (error: any) {
          console.log(error);
        }
      }
    }
  ],
  scopeApply: [
    {
      required: true,
      message: '请选择适用范围'
    }
  ]
};
</script>

<style scoped lang="less">
.icon {
  cursor: pointer;
  font-size: 20px;
}
</style>
